<!DOCTYPE html>
<html>

<head>
	<title>我的消息</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
	<script src="/js/plugins/jquery/jquery.min.js"></script>
	<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
	<link rel="stylesheet" href="/css/reset.css" />
	<link rel="stylesheet" href="/css/message.css" />
	<link rel="stylesheet" href="/css/strategy.css" />
	<link rel="stylesheet" href="/css/strategyCatalogs.css"/>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<script src="/js/common.js"></script>
	<style>
		.date{
			color: #BBBBBB;
			margin-left: 0px;
			font-size: 11px;
		}
	</style>
	<script>
		$(function () {

            var user = JSON.parse(sessionStorage.getItem('user'));
            var params = getParams();
            //根据用户id来获取游记评论
            $.get("/travelComments/"+user.id,function (data) {
                console.log(data);
                $('#comment').renderValues(data, {
					getImgs:function (item, value) {
                        var imgs = value.split(';');
                        console.log(imgs);
                        var temp = '';
                        for (var i = 0; i < imgs.length - 1; i++) {
                            temp += '<li><img src=' + imgs[i] + '></li>';
                        }
                        $(item).html(temp);
                    },
					getHref:function (item, value) {
                        var href = $(item).data('href');
                        $(item).attr('href',href+value);
                    }
                });
                //跳转至游记详情
                $('.comment-right').click(function () {
                    var travelId = $(this).attr('travelId');
                    console.log(travelId);
                    location.href="/travelContent.html?id="+travelId;
                });
            });

            //设置未查看的游记评论条数
            $.get("/travelComments/nums/"+user.id,function (data) {
                if(data > 0){0
                	$('.travelComments').html(data);
				}else{
                    $('.travelComments').html("");
				}
            })
			//设置未查看的游记评论条数为0
            $('.travelCommentClick').click(function () {
                $.ajax({
                    type: "PUT",
                    url: "/travelComments/nums/"+user.id,
                    success: function (data) {
                        console.log(data);
                            $('.travelComments').html("");
                    }
                });
            });


			var systemCount;

            //获取未查看的系统消息数量
			$.get('/systemMessages',{userId:user.id},function (data) {
                systemCount = data;
			    if(data > 0){
					$('.message').renderValues({count:data});
				}else{
                    $('.systemMessageCount').html("");
				}
            })

			var clickCount;
            //获取未查看的点赞数量
			$.get('/clicks/nums',{userId:user.id},function (data) {
                clickCount = data;
                if(data > 0){
					$('.clickOnClick').renderValues({count:data});
				}else{
                    $('.clickCount').html("");
				}
            })
			//设置系统消息全为查看状态
			$('.systemMessageClick').click(function () {
                $.post('/systemMessages',{userId:user.id},function (data){
                });
            });
			//设置点赞全为查看状态
			$('.clickOnClick').click(function () {
                $.ajax({
                    type: "PUT",
                    url: "/clicks/"+user.id
                });
            });
			//获取私信信息
			$.get('/messages',{userId:user.id},function (data) {
                // console.log(data);
                // temp="";
                // $.each(data.list,function (item,ele) {
                //     temp += '<a href="/personalMsg.html?id="'+ele.su_id+'>\n' +
                //         '\t\t\t\t\t\t<li class="list-group-item d-flex justify-content-between align-items-center">\n' +
                //         '\t\t\t\t\t\t\t<div class="item">\n' +
                //         '\t\t\t\t\t\t\t\t<span><img class="rounded-circle" src="'+ele.su_headImgUrl+'" width="50px" height="50px"></span>\n' +
                //         '\t\t\t\t\t\t\t\t<span name="nickName">'+ele.su_nickName+'</span>\n' +
                //         '\t\t\t\t\t\t\t\t<span class="badge badge-danger badge-pill personalMsgCount">'+ele.num+'</span>\n' +
                //         '\t\t\t\t\t\t\t</div>\n' +
                //         '\t\t\t\t\t\t\t<i class="fa"><img src="/icon/right.png" width="25px" height="25px"></i>\n' +
                //         '\t\t\t\t\t\t</li>\n' +
                //         '\t\t\t\t\t</a>';
                // });
                // $('.person').append(temp);

                console.log(data);
                $('.person').renderValues(data,{
                    getHref:function (item, value) {
                        var href = $(item).data('href');
                        $(item).attr('href',href+value);
                    }
                });

                $('.personalMsg').renderValues(data);
                //设置与用户的消息全为查看状态
                $('.messageClick').click(function () {
                    var sendUserId = $(this).attr('sendUserId');
                    $.ajax({
                        type: "PUT",
                        url: "/messages",
                        data: {
                            userId:user.id,
                            sendUserId:sendUserId
						},
                        success: function(msg){

                        }
                    });
                });
            });



            //显示消息数量方法
            // function showCount(count){
            //     console.log(count);
            //     $('.messageCount').html(count);
            // }
        })
	</script>
	<style>
		.template{
			background-color: #f0f0f0;
			height: 8px;
		}
	</style>
</head>

<body>
<div class="search-head">
	<div class="row nav-search">
		<div class="col">
			<a href="javascript:history.go(-1);">
				<span><i class="fa fa-chevron-left"></i></span>
			</a>
		</div>
		<div class="col">
			<span style="font-size: 20px">我的信息</span>
		</div>
		<div class="col"></div>
	</div>
</div>

	<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
		<li class="nav-item">
			<a class="nav-link active show" id="pills-top-tab" data-toggle="pill" href="#pills-top">
				<span style="font-size: 18px">消息</span><span class="badge badge-danger badge-pill messageCount"></span>
			</a>
		</li>
		<li class="nav-item personalMsg">
			<a data-id="1" class="nav-link" id="pills-1-tab" data-toggle="pill" href="#pills-1">
				<span style="font-size: 18px">私信</span><span class="badge badge-danger badge-pill" render-html="totleNoRead"></span>
			</a>
		</li>
		<li class="nav-item travelCommentClick">
			<a data-id="2" class="nav-link" id="pills-2-tab" data-toggle="pill" href="#pills-2">
				<span style="font-size: 18px">评论</span><span class="badge badge-danger badge-pill travelComments" render-html="count"></span>
			</a>
		</li>
	</ul>
	<div class="tab-content" id="pills-tabContent">
		<div class="tab-pane fade active show message" id="pills-top">
			<ul class="list-group">
				<a href="/mine/systemMsg.html" class="systemMessageClick">
					<li class="list-group-item d-flex justify-content-between align-items-center">
						<div class="item">
							<span><img src="/icon/systemMsg.png" width="50px" height="50px"></span>
							<span>系统消息</span>
							<span class="badge badge-danger badge-pill systemMessageCount" render-html="count"></span>
						</div>
						<i class="fa"><img src="/icon/right.png" width="25px" height="25px"></i>
					</li>
				</a>
				<span class="template"></span>
				<a href="#">
					<li class="list-group-item d-flex justify-content-between align-items-center">
						<div class="item">
							<span><img src="/icon/at.png" width="50px" height="50px"></span>
							<span>@我的</span>
							<span class="badge badge-danger badge-pill"></span>
						</div>
						<i class="fa"><img src="/icon/right.png" width="25px" height="25px"></i>
					</li>
				</a>
				<span class="template"></span>
				<a href="/mine/click.html" class="clickOnClick">
					<li class="list-group-item d-flex justify-content-between align-items-center">
						<div class="item">
							<span><img src="/icon/pretty.png" width="50px" height="50px"></span>
							<span>点赞</span>
							<span class="badge badge-danger badge-pill" class="clickCount" render-html="count"></span>
						</div>
						<i class="fa"><img src="/icon/right.png" width="25px" height="25px"></i>
					</li>
				</a>
			</ul>
		</div>
		<div class="tab-pane fade" id="pills-1">
			<ul class="list-group person">
				<div render-loop="list">
					<a data-href="/mine/personalMsg.html?id=" render-key="list.su_id" render-fun="getHref" class="messageClick" render-attr="sendUserId=list.su_id">
						<li class="list-group-item d-flex justify-content-between align-items-center">
							<div class="item">
								<span><img class="rounded-circle" render-src="list.su_headImgUrl" width="50px" height="50px"></span>
								<span name="nickName" render-html="list.su_nickName"></span>
								<span class="badge badge-danger badge-pill personalMsgCount" render-html="list.num"></span>
							</div>
							<i class="fa"><img src="/icon/right.png" width="25px" height="25px"></i>
						</li>
					</a>
				</div>
			</ul>
		</div>
		<div class="tab-pane fade" id="pills-2">
			<div id="comment">
				<div render-loop="list">
					<div class="container row comment">
						<div class="col-2 comment-head">
							<a data-href="/userProfiles.html?id=" render-key="list.user.id" render-fun="getHref">
								<img class="rounded-circle"
									 render-src="list.user.headImgUrl">
							</a>
						</div>
						<div class="col comment-right" render-attr="travelId=list.travel_id">

							<p class="authorName"><span render-html="list.user.nickName"></span><span>评论了你的游记</span></p>
							<span class="date" render-html="list.createTime"></span>
                        </span>
							<div class="comment-content">
								<a href="#">
									<p render-html="list.content"></p>
								</a>
							</div>

							<ul class="comment-img" render-key="list.imgUrls" render-fun="getImgs">
								<li>

								</li>
							</ul>
							<hr/>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
	</div>
	</body>
</html>